import { login, getUserInfo, getUserDetailById } from "@/api/user"
import { setToken, getToken, removeToken } from "@/utils/auth"
import {resetRouter} from '@/router/index'
export default {
  // 包含用户相关数据
  // 开启命名空间，为了防止变量名冲突，这样的话就算模块与模块之间有同一个变量名，也不会冲突
  namespaced: true,
  // 定义store数据，这个数据是响应时的，是会影响我们视图更新的
  state: {
    // 这里因为初始值为空，所以刷新的时候代码都会重置，因此token会重置为''
    token: getToken() || '',
    userInfo: {}
  },
  // 定义同步方法，它是修改state数据的唯一途径
  mutations: {
    // 这个 setToken是：涉及到原型链
    setToken(state, tokenValue) {
      // 这里将token存入了vux
      state.token = tokenValue
      // 将token存入cookie中
      // setToken：涉及到作用域链,这两个链不一样,因此不会发生冲突
      setToken(tokenValue)


      // 登录--->token ---存入token
      // 刷新--->先从本地取
    },
    setUserInfo(state, userInfo){
      state.userInfo = userInfo
    },
    // 清除用户信息
    removeUserInfo(state) {
      state.token = ''
      state.userInfo = {}
      removeToken()
      // 退出时清空路由记录
      resetRouter()
    }
  },
  // 定义异步方法，ajax，api
  actions: {
    // ctx：上下文
    // cxt.commit 提交mutation
    // ctx.dispatch 提交action
    // 1、调用接口请求，登录
    // {commit}:也就是将commit结构出来
    async fetchLogin(ctx, data) {
      console.log('login');
      const res = await login(data)
      // 调用commit方法修改token
      ctx.commit('setToken', res)
    },
    // 2、拿到请求返回值，提交给mutations函数方法
    async fetchUserInfo(ctx) {
      // 这里要发送两个请求，第一个是获取用户信息
      const res = await getUserInfo()
      // 拿到用户的id后再发送一个请求，获取用户的头像信息，
      const res_img = await getUserDetailById(res.userId)
      // 然后将前面的用户信息和后面的用户信息组合起来放到state的用户信息中
      ctx.commit('setUserInfo', {...res, ...res_img})

      // 当我们想在另外一个模块中要使用action函数内部的数据时，应该把这个数据return出去
      return res
    }
  // 组建中只需要调用action函数，传递正确的参数即可
  // 管理模式:dispath(actions)---->commit(mutations) ---->state数据被修改--->然后视图更新
  }}
